<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/public.css">
		<link rel="stylesheet" href="./css/download.css">
		<title>飞鸟</title>
	</head>
	<body>
		<div class="head w-m clearfix">
			<!-- 已登录 -->
			<div class="logo">
				<img src="./img/flylogo.png" alt="" srcset="">
				<span>飞鸟图库</span>
			</div>
			<div class="info">
				<img src="./img/user.png" alt="">
				<span>尖尖上设计</span>
				<img src="./img/cor.png" alt="" srcset="">
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥52</span>
				<span>在线充值</span>
			</div>
			<!-- 未登录 -->
			<div class="login">
				<span>
					<a href="">登录</a> / <a href="">注册</a>
				</span>
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥0</span>
				<span>在线充值</span>
			</div>
		</div>
		<!-- banner -->
		<div class="bg">
			<div class="search w-m" id="searchwm">
				<div class="input-wrap">
					<ul id="inputul" class="clearfix">
						<li class="li1">
							<span>站酷海洛</span>
							<img class="img1" src="./img/input1.png" alt="" srcset="">
							<img class="img2" src="./img/input2.png" alt="" srcset="">
							<img class="img3 hid" src="./img/input3.png" alt="" srcset="">
							<img class="img4 hid" src="./img/input4.png" alt="" srcset="">
						</li>
						<li class="li2 on">
							<span>Shutterstock</span>
							<img class="img11 hid" src="./img/input1.png" alt="" srcset="">
							<img class="img22 hid" src="./img/input2.png" alt="" srcset="">
							<img class="img33" src="./img/input3.png" alt="" srcset="">
							<img class="img44" src="./img/input4.png" alt="" srcset="">
						</li>
						<li class="li3">
							<span>Fotolia</span>
						</li>
						<li class="li4">
							<span>iStockphoto</span>
						</li>
						<li class="li5">
							<span>Depositphotos</span>
						</li>
						<li class="li6">
							<span>Dreamstime</span>
						</li>
						<li class="li7">
							<span>Bigstockphoto</span>
						</li>
						<li class="li8">
							<span>123rf</span>
						</li>
					</ul>
					<div class="input clearfix">
						<div class="one clearfix">
							<div class="tupian">
								<span>图片</span>
								<i style="vertical-align: middle;" class="layui-icon layui-icon-triangle-d"></i>
								<p id="ship">视频</p>
							</div>
							<img id="categorytu" style="margin:0 8px 0 17px;" src="./img/shutterstock.png" alt="" srcset="">
							<img id="toggletu" src="./img/input3.png" alt="" srcset="">
						</div>
						<div class="two">
							<input type="text" placeholder="请输入需要下载的文件ID" id="searchid">
						</div>
						<div class="three">
							<img src="./img/yyww.png" alt="">
							<span style="vertical-align: middle">下载说明</span>
						</div>
					</div>
				</div>
				<div class="search-btn">
					<span>立即搜索</span>
					<img src="./img/click.png" alt="" srcset="">
				</div>
			</div>
			<div class="title">
				<span>根据输入的ID搜索到的结果</span>
			</div>
			<div class="list w-m">
				<ul>
					<li class="clearfix">
						<div class="right">
							<p>立即下载</p>
							<p>下载即表示同意<a href="#">网站条款</a></p>
						</div>
						<div class="left">
							<img src="./img/tu3.png" alt="" srcset="">
							<div class="info">
								<p class="p1">2235189026</p>
								<p class="p2">￥1.5</p>
								<p class="p3">名称：情人节矢量插画</p>
								<p class="p4">大小：22M</p>
								<p class="p5">
									<span style="vertical-align: middle;">格式：1000-667 位图</span>
									<img style="width: 15px;vertical-align: middle;" src="./img/help1.png" alt="" srcset="">
								</p>
							</div>
						</div>
					</li>
					<li class="clearfix two">
						<div class="right">
							<div class="top" style="border-bottom: 1px dashed #ddd;padding-bottom:15px;">
								<span>中图</span>
								<div class="div">
									<div>
										<span class="span1">￥0.5</span>
										<span class="span2">超值</span>
										<span class="span2">独家</span>
									</div>
									<div>
										<span class="span11">PNG</span>
										<span class="span22">1000×667</span>
										<span class="span33">预览</span>
									</div>
								</div>
								<p class="p" style="background: #ff5e1f;">立即下载</p>

							</div>
							<div class="top" style="padding-top: 15px;padding-bottom:15px;">
								<span style="color: #333333;">大图</span>
								<div class="div">
									<div>
										<span class="span1" style="color:#333;">￥1.5</span>

									</div>
									<div>
										<span class="span11">PNG</span>
										<span class="span22">1000×667</span>
										<span class="span33" style="opacity:0;visibility:hidden;">预览</span>
									</div>
								</div>
								<p class="p" style="background: #fff;color:#0066ff;border:1px solid #0066ff;">立即下载</p>

							</div>
							<p style="text-align: end;">下载即表示同意<a href="#">网站条款</a></p>
						</div>
						<div class="left">
							<img src="./img/tu3.png" alt="" srcset="">
							<div class="info">
								<p class="p1">2235189026</p>
								<p class="p3" style="margin-top: 18px;">名称：情人节矢量插画</p>
								<p class="p4">大小：22M</p>
								<p class="p5">
									<span style="vertical-align: middle;">格式：1000-667 位图</span>
									<img style="width: 15px;vertical-align: middle;" src="./img/help1.png" alt="" srcset="">
								</p>
							</div>
						</div>
					</li>
					<li class="clearfix three">
						<div class="right">
							<img src="./img/loading.png" alt="" srcset="">
							<p>资源下载中</p>
							<p>请稍等</p>
						</div>
						<div class="left">
							<img src="./img/tu3.png" alt="" srcset="">
							<div class="info">
								<p class="p1">2235189026</p>
								<p class="p2">￥1.5</p>
								<p class="p3">名称：情人节矢量插画</p>
								<p class="p4">大小：22M</p>
								<p class="p5">
									<span style="vertical-align: middle;">格式：1000-667 位图</span>
									<img style="width: 15px;vertical-align: middle;" src="./img/help1.png" alt="" srcset="">
								</p>
							</div>
						</div>
					</li>
					<li class="clearfix four">
						<div class="right">
							<span>立即失败</span>
							<img id="wenhao" src="./img/wenhao.png" alt="">
							<div id="wenhao1">
								下载失败可能会由于服务器等原因，
								可再次点击下载，不会产生二次费用
							</div>
							<p class="btn">重新下载</p>
							<p>下载即表示同意<a href="#">网站条款</a></p>
						</div>
						<div class="left">
							<img src="./img/tu3.png" alt="" srcset="">
							<div class="info">
								<p class="p1">2235189026</p>
								<p class="p2">￥1.5</p>
								<p class="p3">名称：情人节矢量插画</p>
								<p class="p4">大小：22M</p>
								<p class="p5">
									<span style="vertical-align: middle;">格式：1000-667 位图</span>
									<img style="width: 15px;vertical-align: middle;" src="./img/help1.png" alt="" srcset="">
								</p>
							</div>
						</div>
					</li>
				</ul>
			</div>

		</div>
		<div class="foot">
			<div class="foot-bottom">
				<a href="">COPYRIGHT (©) 2018 版权所有： 飞鸟图库</a>
			</div>
		</div>
		<script src="./layui/layui.js"></script>
		<script>
			layui.use(['jquery','layer'], function() {
				var layer = layui.layer;
				var $ = layui.$;
				// input
				$('.tupian').click(function() {
					$('#ship').slideToggle('fast');
				})
				$('#ship').hover(
					function() {
						this.style.background = '#4792de';
						this.style.color = '#fff';
					},
					function() {
						this.style.background = '#eee';
						this.style.color = '#666';
					})
				$('#ship').click(function() {
					if (this.innerHTML == '视频') {
						$('.tupian span')[0].innerHTML = '视频';
						this.innerHTML = '图片';
						$('#toggletu')[0].src = './img/input4.png';
					} else {
						$('.tupian span')[0].innerHTML = '图片';
						$('#ship').html('视频');
						$('#toggletu')[0].src = './img/input3.png';
					}

				})

				// 

				var i = 1;
				var arr = [
					'./img/zcool.png',
					'./img/shutterstock.png',
					'./img/adobe.png',
					'./img/istockphoto.png',
					'./img/depositphotos.png',
					'./img/dreamstime.png',
					'./img/bigstockphoto.png',
					'./img/123Rf.png'
				]

				$('#inputul').on('mouseover','li:not(".on")',function() {
					$(this).addClass('on1').siblings().removeClass('on1');
					if (this.className.indexOf('li1')>-1) {
						$('.li1 .img1').addClass('hid');
						$('.li1 .img2').addClass('hid');
						$('.li1 .img3').removeClass('hid');
						$('.li1 .img4').removeClass('hid');

					}else if (this.className.indexOf('li2')>-1) {
						$('.li2 .img11').addClass('hid');
						$('.li2 .img22').addClass('hid');
						$('.li2 .img33').removeClass('hid');
						$('.li2 .img44').removeClass('hid');

					}else{
						
					}	
				})
				$('#inputul').on('mouseout','li:not(".on")',function() {
					$(this).removeClass('on1');
					if (this.className.indexOf('li1')>-1) {
						$('.li1 .img1').removeClass('hid');
						$('.li1 .img2').removeClass('hid');
						$('.li1 .img3').addClass('hid');
						$('.li1 .img4').addClass('hid');

					}else if (this.className.indexOf('li2')>-1) {
						$('.li2 .img11').removeClass('hid');
						$('.li2 .img22').removeClass('hid');
						$('.li2 .img33').addClass('hid');
						$('.li2 .img44').addClass('hid');

					}else{
						
					}	
				})	
				
				$('#inputul li').click(function() {
					$(this).addClass('on').siblings().removeClass('on');
					if (this.className.indexOf('li1')>-1 || this.className.indexOf('li2')>-1) {
						$('.tupian').css('display','block');
						$('#toggletu').css('display','initial');
						$('.one').css('text-align','initial');
						$('.two input').css('width','686px')
						
					}else{
						$('.tupian').css('display','none');
						$('#toggletu').css('display','none');
						$('.one').css('text-align','center');
						$('.two input').css('width','772px')
					}
					if (this.className.indexOf('li1')>-1) {
						$('.li1 .img1').addClass('hid');
						$('.li1 .img2').addClass('hid');
						$('.li1 .img3').removeClass('hid');
						$('.li1 .img4').removeClass('hid');

						$('.li2 .img11').removeClass('hid');
						$('.li2 .img22').removeClass('hid');
						$('.li2 .img33').addClass('hid');
						$('.li2 .img44').addClass('hid');
					}else if (this.className.indexOf('li2')>-1) {
						$('.li2 .img11').addClass('hid');
						$('.li2 .img22').addClass('hid');
						$('.li2 .img33').removeClass('hid');
						$('.li2 .img44').removeClass('hid');

						$('.li1 .img1').removeClass('hid');
						$('.li1 .img2').removeClass('hid');
						$('.li1 .img3').addClass('hid');
						$('.li1 .img4').addClass('hid');
					}else{
						$('.li1 .img1').removeClass('hid');
						$('.li1 .img2').removeClass('hid');
						$('.li1 .img3').addClass('hid');
						$('.li1 .img4').addClass('hid');

						$('.li2 .img11').removeClass('hid');
						$('.li2 .img22').removeClass('hid');
						$('.li2 .img33').addClass('hid');
						$('.li2 .img44').addClass('hid');
					}
					
					$('#categorytu')[0].src = arr[$(this).index()]
					
				})
	
				$('.search-btn').click(function() {		
				var value = $('#searchid')[0].value;	
					if (!value) {
						layer.tips(
							'<p style="color:#fff;">请输入文件ID~~</p>',
							'#searchid', {
								tips: [3, '#02a388'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						// window.open('./download.html');
						// location.href = './download.html';
						console.log('success');
						
					}
			})
			
			document.getElementById('searchwm').onkeyup = function(e) {
					var ev = document.all ? window.event : e;
					if (ev.keyCode === 13) {
						$('.search-btn').click();
					}
				};
					$('#wenhao').hover(
					function() {
						$('#wenhao1')[0].style.display = 'block'
					},
					function() {
						$('#wenhao1')[0].style.display = 'none'
					}
				)
			})
		</script>
	</body>
</html>
